(function (fruit, util, global) {
    fruit.ui.define("fruit.graphic.Topology.NodeToolTip", fruit.ui.Tooltip, {
        view: function () {
            var root = this.$();
            var body = this.$("body");
            root.props.class += " f-tooltip-dialog f-generalTopology-node-tootltip";
            body.content = [
                {
                    name: 'header',
                    props: {
                        'class': 'f-tooltip-dialog-header'
                    },
                    content: [
                        {
                            name: "actions",
                            props: {
                                'class': 'f-tooltip-dialog-header-actions'
                            },
                            content: [
                                {
                                    name: 'thumbtack',
                                    tag: 'i',
                                    props: {
                                        'class': {
                                            icon: '{#icon}'
                                        },
                                        'aria-selected': '{#pin}'
                                    },
                                    events: {
                                        "CLICK": "{#pinDialog}"
                                    }
                                }
                            ]
                        },
                        {
                            tag: 'span',
                            props: {
                                'class': 'f-tooltip-dialog-header-text'
                            },
                            content: '{#title}'
                        }
                    ]
                },
                {
                    name: 'content',
                    props: {
                        'class': 'f-tooltip-dialog-content f-list'
                    },
                    content: [
                        {
                            name: "list",
                            tag: "ul",
                            props: {
                                'class': 'f-list-wrap',
                                template: {
                                    tag: "li",
                                    props: {
                                        'class': 'f-list-item-i',
                                        role: 'listitem'
                                    },
                                    content: [
                                        {
                                            tag: 'label',
                                            content: "{key}: "
                                        },
                                        {
                                            tag: 'span',
                                            content: "{value}"
                                        }
                                    ]

                                }
                            }
                        },
                        {
                            name: 'icons'
                        }
                    ]
                }
            ]
        },
        properties: {
            title: {
                value: null,
                observable: true
            },
            pin: {
                value: false,
                observable: true
            },
            icon: {
                getter: function () {
                    return this.pin() ? "icon-nodes-attributes-pin-selected" : "icon-nodes-attributes-pin";
                },
                observable: true
            }
        },
        methods: {
            open: function (opts) {
                this.inherited(opts);
                this.pin(false);
                this.notifyPropertyChanged("icon");
            },
            close: function (force) {
                if (!this.pin()) {
                    this.inherited();
                }
                if (force) {
                    this.inherited();
                    this.pin(false);
                    this.notifyPropertyChanged("icon");
                }
            },
            pinDialog: function () {
                this.pin(!this.pin());
                this.notifyPropertyChanged("icon");
            },
            setData: function (d) {
                var keysArray = [];
                util.each(d, function (value, key) {
                    if (value != null && !util.isObject(value)) {
                        keysArray.push({
                            value: value,
                            key: key
                        });
                    }
                });
                this.$("list").items(keysArray);

                //this.model(keysArray);
            }
        }
    });
})(fruit, fruit.util, fruit.global);